<!--页面组件-->
<template>
    <div>
      <div class="tempxyz tableHeight">
        <CCard>
          <CCardHeader>
            <!-- class=strongstyle -->
            <strong class="title">系统日志</strong>
          </CCardHeader>
          <CCardBody class="card-body">
            <div class="cardstyle">
              <div class="rowstyle" @keyup.enter="search()">
                <div class="threePart" style="margin-bottom: 10px">
                  <div class="myColtemp layout" style>
                    <p class="labelName" style="width: 60px">用户名称</p>
                    <Input
                      :title="groupName"
                      v-model="groupName"
                      placeholder="请输入用户名称搜索..."
                      class="pickstyle"
                      maxlength="50"
                      @keyup.enter="hello"
                      id="inputenter"
                    />
                  </div>
                  <div class="myColtemp layout" style>
                    <p class="labelName" style="width: 60px">角色名称</p>
                    <Input
                      :title="dataName"
                      v-model="dataName"
                      placeholder="请输入角色名称搜索..."
                      class="pickstyle"
                      maxlength="50"
                      @keyup.enter="hello"
                      id="inputenter"
                    />
                  </div>
                  <div class="myColtemp layout" style="width: 30%">
                    <label
                      class="labelName"
                      style="margin-right: 25px; display: inline-block"
                      >执行结果</label
                    >
                    <!-- <RadioGroup
                      v-model="taskStatus"
                      class="m_radio_group"
                      label="任务状态"
                    >
                      <Radio label>全部</Radio>
                      <Radio label="1">执行中</Radio>
                      <Radio label="8">待执行</Radio>
                      <Radio label="4">成功</Radio>
                      <Radio label="5">失败</Radio>
                      <Radio label="10">部分失败</Radio>
                      <Radio label="2">暂停</Radio>
                      <Radio label="7">停止</Radio>
                    </RadioGroup> -->
                    <Select v-model="taskStatus" clearable>
                        <template v-for="(item, index) in taskStatusOption">
                        <Option :value="`${item.value}-${item.label}`" :key="index">
                        {{item.label}}</Option>
                        </template>
                    </Select>
                  </div>
                  <div class="startStutes layout">
                    <label class="labelName">开始日期</label>
                    <DatePicker
                      type="date"
                      placeholder="请选择开始日期"
                      v-model="startTime"
                      class="pickstyle"
                      @on-change="onStartTimeChange"
                      :options="startTimeOption"
                      :editable="false"
                    ></DatePicker>
                  </div>
                  <div class="endDateBtn layout">
                    <label class="labelName" style="width: 60px">结束日期</label>
                    <DatePicker
                      type="date"
                      placeholder="请选择结束日期"
                      v-model="endDate"
                      class="pickstyle"
                      @on-change="onEndTimeChange"
                      :options="endTimeOption"
                      :editable="false"
                    ></DatePicker>
                  </div>
                </div>
                <div class="secondPart" style="margin-top: 10px">
                  <!-- <div class="myColtemp layout" style>
                    <p class="labelName" style="width: 60px">数据来源</p>
                    <Input
                      :title="taskSource"
                      v-model="taskSource"
                      placeholder="0-手动/1-应急/2-目录/3-定时/4-其他..."
                      class="pickstyle"
                      maxlength="50"
                      @keyup.enter="hello"
                      id="inputenter"
                    />
                  </div> -->
                  <!-- <div class="myColtemp layout">
                    <label style="margin-right: 41px; display: inline-block"
                      >优先级</label
                    >
                    <RadioGroup v-model="priority" class="m_radio_group">
                      <Radio label>全部</Radio>
                      <Radio label="0">普通</Radio>
                      <Radio label="1">优先</Radio>
                    </RadioGroup>
                  </div> -->
  
                  
                  <div class="searchRight">
                    <CButton
                      color="info"
                      @click="search()"
                      class="myCol1 listbtn system-btn-style"
                    >
                      <CIcon name="cil-magnifying-glass" />&nbsp;搜索
                    </CButton>
                    <CButton color="info" @click="clearmess" class="myCol1 clean system-btn-style">
                      <img
                        src="@/assets/icons/chongzhi.png"
                        style="width: 15px; height: 15px"
                        alt
                      />&nbsp; 重置
                    </CButton>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: calc(100% - 160px)">
                <TaskTable
                ref="refTaskTable"
                style="height: 100%"
               ></TaskTable>
            </div>
          </CCardBody>
         <!-- <CCardFooter class="page-link">
            <CRow>
              <CCol class="footerPage" style>
                <span class="pageContent">
                  每页
                  <CSelect
                    @change="getVendorId($event)"
                    :options="[10, 15, 20, 25]"
                    v-model="pageSize"
                    class="selectStyle"
                    style
                  />
                  条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                    this.allNum
                  }}条记录)
                </span>
                <CPagination
                  :activePage.sync="currentPage"
                  :pages="total"
                  align="end"
                  v-if="total != 0"
                />
              </CCol>
            </CRow>
          </CCardFooter>-->
        </CCard>
      </div>
      <!-- 质检报告 -->
      <!--    <div>
        <QualityReport
          ref="refQcReportModal"
          v-show="qcReportModal"
          :modalShow="qcReportModal"
          @closed="qcReportModalClosed"
        ></QualityReport>
      </div>-->
    </div>
  </template>
  <script>
  import TaskTable from "./taskTable";
//   import TaskTable from "../../template/table/TableList";
//   import QualityReport from "../qualityCheck/qualityReport";
  const fields = [
    {
      label: "序号",
      key: "number",
      _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "任务名称",
      key: "groupTaskName",
      _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "任务来源",
      key: "taskSourceName",
      _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "用户名",
      key: "show_userName",
      _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "开始时间",
      key: "createTime",
      _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
        title: "结束时间",
      key: "endTime",
      _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "优先级",
      key: "show_details1",
      _style: "width:75px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "景数(成功/失败)",
      key: "show_imageNumber",
      _style: "width:120px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "状态",
      key: "show_details2",
      _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      title: "操作",
      key: "show_details",
      _style: "width:360px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
  ];
  export default {
    name: "allTask",
    components: {TaskTable,},
    data() {
      return {
        modalStyle: { top: "340px" },
        qcReportModal: false,
        fields,
        showPop: false,
        pauseShow: false,
        restoreShow: false,
        restartShow: false,
        retryShow: false,
        stopShow: false,
        delShow: false,
  
        taskSource:"",//数据来源
        dataName:"",//数据名称
  
        clickId: "",
        loading: true,
        currentPage: 1,//当前页数
        pages: 0,
        total: 0,
        allNum: 0,
        pageSize: 15,
        priority: "",
        taskStatus: "",
        gettaskStatus: "",
        searchName: "",
        groupName: "",//用户名称
        changestatus: false,
        data: [],
        startTime: "",
        endDate: "",
        startTimeOption: {},
        endTimeOption: {},
  
        prioShow: false, // 修改优先级弹窗
        priorityData: {
          priority: "0",
          startWorkflowId: "",
        },
        productpath: "",
        showdownLoad: false,
        treeData: [],
        taskStatusOption:[
            {
                label:"执行中",
                value:"1",
            },
            {
                label:"待执行",
                value:"2",
            },
            {
                label:"成功",
                value:"3",
            },
            {
                label:"失败",
                value:"4",
            },
            {
                label:"部分失败",
                value:"5",
            },
            {
                label:"停止",
                value:"6",
            },
        ]
  
  
      };
    },
    computed: {
      getColumnlist() {
        return [
          {
            type: "selection",
            width: 60,
            align: "center",
          },
          {
            key: "productName",
            title: "质检报告文件(文件夹)",
            render: (h, params) => {
              return h("div", [
                h(
                        "span",
                        {
                          style: {},
                          //就是这里加的属性
                          domProps: {
                            title: params.row.productName,
                          },
                        },
                        params.row.productName
                ),
              ]);
            },
          },
          {
            title: "操作",
            width: "150px",
            slot: "action",
            align: "center",
          },
        ];
      },
    },
    mounted() {
      // 查询子任务页面返回调用
      // if (this.$route.query.from === "taskChildren") {
      //     this.currentPage = parseInt(this.$route.query.pageNum);
      // }
      if (this.$route.query.from === "adminHome") {
        // 调用父组件的方法
        this.$parent.$parent.headershowTask();
      }
      this.$refs.refTaskTable.initParam(this.getSearchParam());
      this.$refs.refTaskTable.getTaskTableData();
      this.onStartTimeChange(this.startTime);
      this.onEndTimeChange(this.endTime);
    },
    methods: {
  
      pageChange(data) {
        this.total = data.total;
        this.allNum = data.allNum;
      },
      getSearchParam() {
        let data = {};
        data.pageNum = this.currentPage;
        data.pageSize = this.pageSize;
        data.status = this.taskStatus;
        data.priority = this.priority;
        data.startTime = this.startTime;
        data.endTime = this.endDate;
        data.name = this.groupName;
        data.dataName = this.dataName;//数据名称
        data.taskSource = this.taskSource;//数据来源
        data.tag = "";
        return data;
      },
  
      search() {
        this.gettaskStatus = this.taskStatus;
        this.$refs.refTaskTable.initParam(this.getSearchParam());
        this.$refs.refTaskTable.getTaskTableData();
      },
      qcReportModalClosed() {
        this.qcReportModal = false;
      },
  
      // 树选择名称，传递名称
      // 复选
      // selectTree(arr,obj) {
      //   let datalength = arr.length
      //   let newarr = [];
      //   for (let i = 0; i < datalength; i++) {
      //     if(arr[i].path != null){
      //       let temp = arr[i].path;
      //       newarr.push(temp);
      //     }
  
      //   }
      //   this.productpath = newarr.toString();
      //   this.productpath = this.$refs.tree.getSelectedNodes()[0].path;
      // },
  
      getVendorId(event) {
        let tempdata = event.target.value; //获取option对应的value值
        this.pageSize = parseInt(tempdata);
      },
      clearmess() {
        this.groupName = "";
        this.startTime = "";
        this.endDate = "";
        this.priority = "";
        this.taskStatus = "";
        this.currentPage = 1;
        this.taskSource = "";
        this.dataName = "";
        this.$refs.refTaskTable.initParam(this.getSearchParam());
        this.$refs.refTaskTable.getTaskTableData();
      },
      // 输入框判断 start
      onStartTimeChange(startTime, type) {
        this.endTimeOption = {
          disabledDate(endTime) {
            return (
              endTime < new Date(startTime) - 8 * 60 * 60 * 1000 ||
              endTime > Date.now()
            );
          },
        };
      },
      onEndTimeChange(endTime, type) {
        this.startTimeOption = {
          disabledDate(startTime) {
            return startTime >= new Date(endTime) || startTime >= Date.now();
          },
        };
      },
      // end
      hello() {
        this.$Message.error("hello");
      },
    },
    watch: {
      data(newVal, oldVal) {
        this.$nextTick(function () {
          this.GlobalPermissionRender.render();
        });
      },
      groupName(newVal, oldVal) {
        if (newVal.length >= 50) {
          this.$Message.warning("任务名称长度不得超过50个字符");
        } else {
        }
      },
      // pageSize(newVal, oldVal) {
      //   this.pageSize = newVal;
      //    this.$refs.refTaskTable.pageSizeChange(newVal);
      // },
      // currentPage(newVal, oldVal) {
      //   this.currentPage = newVal;
      //    this.$refs.refTaskTable.currentPageChange(newVal);
      // },
      startTime(newVal, oldVal) {
        this.startTime = this.$moment(newVal).format("YYYY-MM-DD");
      },
      endDate(newVal, oldVal) {
        this.endDate = this.$moment(newVal).format("YYYY-MM-DD");
      },
    },
  };
  
  $("#inputenter").keydown(function (e) {
    if (e.keyCode == 13) {
      this.hello();
    }
  });
  </script>
  
  
  
  <style scoped>
  .myCol {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
  .myColPri {
    margin-right: 10px;
  }
  .myCol1 {
    margin-left: 0px;
  }
  .myColtemp {
    display: flex;
    align-items: center;
    margin-left: 5px;
    width: 33.3%;
  }
  .search {
    display: flex;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.76563rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    width: 50px;
  }
  
  .labelName {
    width:80px;
    margin-right: 25px;
    margin-bottom: 0px;
  }
  .m_radio_group {
    height: 21px;
    margin-top: -9px;
  }
  .m_radio_group label {
    margin: 0;
    margin-right: 14px;
  }
  .btnStyle {
    padding: 0;
    margin: 0 3px;
  }
  .btnStyle:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .strongstyle {
    font-size: 18px;
  }
  
  .pickstyle {
    width: 58%;
  }
  
  .clean {
    margin-left: 10px;
    margin-right: 18px;
  }
  .listbtn {
    margin-left: 0px;
  }
  .deletestyle {
    width: 15px;
    height: 15px;
  }
  .page-link {
    cursor: pointer;
  }
  .pageContent {
    margin-right: 26px;
    font-size: 14px;
  }
  .selectStyle {
    display: inline-block;
    width: 100px;
    margin-right: 5px;
  }
  .footerPage {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    color: black;
  }
  .modal-header {
    display: flex;
    justify-content: flex-start;
  }
  .threePart,
  .secondPart {
    display: flex;
    justify-content: space-between;
  }
  .layout {
    width: 33.3%;
    margin-right:5px;
  }
  .searchRight {
    width: 18%;
  }
  .searchRight > .btnstyle1 {
    position: absolute;
    right: 2%;
  }
  /* 用以调整表格位置 */
  .tablePosition {
    overflow-y: auto;
    height: calc(100% - 158px);
  }
  .rowstyle {
    margin-bottom: 0;
  }
  
  .tempxyz /deep/.card-footer {
    bottom: 12px;
  }
  
  /deep/.page-item.active .page-link {
    background-color:  var(--label-font-color,  #5d8bc4)
  }
  </style>
  <style>
  .cardstyle {
    margin: 10px 0;
  }
  .tempxyz .card-body {
    overflow-y: auto;
    padding: 0 20px;
    bottom: 0;
    /* height: calc(100% - 52px) !important; */
  }
  
  .tablePosition > div {
    height: 100% !important;
    width: 100% !important;
    border: 1px solid #d8dbe0;
    border-left: 0;
    border-right: 0;
  }
  
  .table {
    margin-bottom: 0;
  }
  
  .table th {
    border-top: 0;
  }
  .onButton:hover {
    color: white;
  }
  </style>
  